/* Estilo base para los divs */
div {
  width: 200px;
  height: 50px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  background-color: lightgray;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}

/* Transformaciones */
.translate {
  transform: translate(50px, 100px);
}

.rotate {
  transform: rotate(20deg);
}

.rotate-neg {
  transform: rotate(-20deg);
}

.scale {
  transform: scale(2, 3);
}

.scale-small {
  transform: scale(0.5, 0.5);
}

.scaleX {
  transform: scaleX(2);
}

.scaleX-small {
  transform: scaleX(0.5);
}

.scaleY {
  transform: scaleY(3);
}

.scaleY-small {
  transform: scaleY(0.5);
}

.skewX {
  transform: skewX(20deg);
}

.skewY {
  transform: skewY(20deg);
}

.skew {
  transform: skew(20deg, 10deg);
}

.matrix {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}